<template>
  <div class="box">
    <div class="box_center">
      <el-affix target=".box_center" :offset="20">
        <ul class="box_center_type">
          <li v-for="item in typeData" :key="item.id" class="box_center_type_list">
            <a :href="`/news/${item.id}`" class="box_center_type_list_link"
              :class="item.id == typeSelectId ? 'active' : ''" :title="item.name">{{ item.name
              }}</a>
          </li>
        </ul>
      </el-affix>
      <div class="box_center_content">
        <ul class="box_center_content_ul">
          <li class="box_center_content_ul_li" v-for="item in tableData" :key="item.id">
            <a class="box_center_content_ul_li_cover"
              :href="`/news_details/${item.id}.html`" :title="item.title">
              <el-image :src="item.imgs && item.imgs.length > 0 ? item.imgs[0] : ''" :alt="item.title" fit="cover" lazy style="width: 100%;height: 100%;"></el-image>
            </a>
            <div class="box_center_content_ul_li_item">
              <a class="box_center_content_ul_li_item_title" :href="`/news_details/${item.id}.html`"
                :title="item.title">{{ item.title }}</a>
              <p class="box_center_content_ul_li_item_desc">{{ item.brief }}</p>
              <div class="box_center_content_ul_li_item_bottom">
                <p class="box_center_content_ul_li_item_bottom_time">{{ item.publishedTime }}</p>
                <a class="box_center_content_ul_li_item_bottom_jump"
                  :href="`/news_details/${item.id}.html`" :title="item.title">进入详情</a>
              </div>
            </div>
          </li>
        </ul>
        <el-empty v-show="tableData.length < 1" />
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  typeData: {
    type: Array,
    default: []
  },
  typeSelectId: {
    type: String,
    default: ''
  },
  tableData: {
    type: Array,
    default: []
  }
})
</script>

<style lang="less" scoped>
p {
  margin: 0;
}

.box {
  padding: 20px 0;
  background-color: #f8f8f8;
  min-height: calc(100vh - 454px);

  &_center {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;

    &_type {
      width: 240px;
      background: #FFFFFF;
      border-radius: 10px;
      border: 1px solid #EAEAE6;
      margin-right: 20px;
      padding: 20px 0;

      &_list {
        padding: 0 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &_link {
          height: 40px;
          line-height: 40px;
          transition: all .3s;

          &:hover {
            transition: all .3s;
            color: #FF3F29;
          }

          &.active {
            transition: all .3s;
            color: #FF3F29;
          }
        }
      }
    }

    &_content {
      flex: 1 0;
      background: #FFFFFF;
      border-radius: 10px;
      border: 1px solid #EAEAE6;
      padding: 0 30px;
      overflow: hidden;

      &_ul {

        &_li {
          padding: 30px 0;
          border-bottom: 1px solid #EAEAEA;
          display: flex;
          align-items: flex-start;

          &_cover {
            width: 220px;
            height: 150px;
            margin-right: 20px;
          }

          &_item {
            flex: 1;
            padding-top: 12px;
            overflow: hidden;

            &_title {
              height: 20px;
              line-height: 20px;
              display: block;
              font-weight: bold;
              font-size: 20px;
              color: #333;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            &_desc {
              height: 34px;
              margin-top: 18px;
              color: #666666;
              line-height: 17px;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }

            &_bottom {
              height: 14px;
              line-height: 14px;
              margin-top: 43px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 14px;

              &_time {
                color: #999999;
                // font-size: 14px;
              }

              &_jump {
                color: #666666;
                // font-size: 14px;
              }
            }
          }

          &:last-child {
            border-bottom: 0;
          }
        }
      }
    }
  }
}
</style>